import React, { Component } from 'react';
class TodoList extends Component {
    state = {
        title:'',
        list:[
            {
                id:1,
                title:'评论内客: 楼主好人'
            }
        ]
    }
    updateInput=(e)=>{
        this.setState({
            title:e.target.value
        })
    }
    // 添加
    add=()=>{
        const {title}=this.state
        let newArr=this.state.list.concat([{title}])
        this.setState({
            list:newArr
        })
    }
    // 删除
    del=(index)=>{
        this.state.list.splice(index,1)
        this.setState({
            list:this.state.list
        })
    }
    // 全部删除
    delAll=(index)=>{
        this.state.list.splice(index)
        this.setState({
            list:this.state.list
        })
    }
    render() {
        return (<div>
            <div className='todolist'>
                <div className='top'>
                    <div className='center'>
                        <h2>拾亿记事本</h2>
                        <span>记录生活点点滴滴，写下生活每一个美好</span>
                        <div className='sacrch'>
                            <button>内容</button>
                            <input placeholder='请输入你要记事的内容' value={this.state.title} onChange={this.updateInput}></input>
                            <button onClick={this.add}>确认</button>
                        </div>
                    </div>
                </div>
                <div className='list'>
                    <ul>
                        {
                            this.state.list.map((item,index)=><li key={index}>
                                <span>{index+1}</span>
                                <span>{item.title}</span>
                                <span onClick={this.del}>X</span>
                            </li>)
                        }
                    </ul>
                </div>
                <div className='footer'>
                    <span>总条数:{this.state.list.length}</span>
                    <span onClick={this.delAll}>清除</span>
                </div>
            </div>
        </div>);
    }
}

export default TodoList;